<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>用户登录</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="../js/echarts.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <link rel="stylesheet" href="../css/login.css" />
       
        <script src="../bootstrap/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    </head>
    <body>

                        <div class="col-sm-6 col-sm-offset-1 form-box" style="margin-top: 10%;">
                        	
                            <div class="form-bottom">
			                    <form role="form" action="" method="post" class="login-form">
			                    	<div class="form-group">
			                    		<label class="sr-only" for="form-username">Username</label>
			                        	<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="form-password">Password</label>
			                        	<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
			                        </div>
			                        <button  class="btn">登录</button>
			                        <button  class="btn">注册-> </button>
			                    </form>
		                    </div>
                        </div>
		
		<div id="main" style="height:300px"></div>
		<script type="text/javascript">
              var  myChart = echarts.init(document.getElementById('main'));
              var arr1=[],arr2=[];
              function arrTest(){
                $.ajax({
				  
                  type:"post",
                  url:"echart.php",
                  dataType:"json",
				  async:false,
				  data:{},
                  success:function(result){
					
                    if (result){
                      for (var i = 0; i < result.length; i++) {
                          arr1.push(result[i].name);
                          arr2.push(result[i].num);
                      }
                    }
                  },
				error:function(errorMsg) {
					alert("数据读取失败");
				}	
              	})
				return arr1,arr2;
			  }
              arrTest();
				
              var  option = {
				  	 title: {
						text: '注册的男女比例',
						subtext: '数据来自数据库'
					},
                    tooltip: {
						
                        show: true
                    },
                    
                    xAxis : [
                        {
                            type : 'category',
                            data : arr1
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"num",
                            "type":"bar",
                            "data":arr2
                        }
                    ]
                };

                myChart.setOption(option);
   
   </script>
</html>